<template>
    <div>
        <el-form
            status-icon :model="postForm" :rules="rules"
            ref="postFormRef" label-width="120px"
            size="small"
        >


            <el-form-item label=" 名称" prop="projectinfoname">
                <el-input placeholder="请输入" v-model="postForm.projectinfoname"/>
            </el-form-item>
            <el-form-item label="图片" prop="image">
                <Upload v-model="postForm.image" accept=".jpg,.png,.gif"/>
            </el-form-item>

            <el-form-item label=" 内容" prop="remark">
                <el-input placeholder="请输入" v-model="postForm.remark"/>
            </el-form-item>





        </el-form>

        <div slot="footer" class="dialog-footer" style="margin-bottom: 200px">
            <el-button type="primary" @click="saveData" icon="coin">保存</el-button>
        </div>

    </div>
</template>


<script name="dialogForm" setup>

import {useRoute, useRouter} from "vue-router";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息


import axios_request from '../../util/axios_request.js'
import {onMounted, ref, watch} from "vue";  // 一些常用的DATA里的参数,如日期选择的参数项等

import Upload from '../../components/Upload/index.vue'

let formData = {
    projectinfoname: '',
    image: '',
     remark: '',


}


const props = defineProps({

    //数据ID,只在这个组件中使用
    dataId: {
        type: Number,
        default: 0
    },
    //隐藏与显示,用于监控和初始,只在这个组件中使用
    dialogFormVisible: {
        type: Boolean,
        default: false
    },

});


const postForm = ref({});//这里写注释

const rules = {
    projectinfoname: [{required: true, message: "请填写"}],


}



//监听数据的改变
watch(() => props.dataId, newdata => {
    //console.log('监听到改变')
    fetchData()//根据id的变化 更新表单的值

}, {deep: true})

watch(() => props.dialogFormVisible, newdata => {
    //console.log('监听到改变')
    postForm.value = JSON.parse(JSON.stringify(formData))//深拷贝了一份数据模板,用于表单初始化
    if (newdata) fetchData()//监控弹窗是否显示,显示则初始化数据

}, {deep: true})


// 初始化

onMounted(() => {
    postForm.value = JSON.parse(JSON.stringify(formData))//深拷贝了一份数据模板,用于表单初始化

    if (route.query.id) props.dataId = route.query.id//如果是在菜单中直接打开的路由编辑界面(不是弹窗界面),则从路由获取ID
    fetchData()
    //深拷贝了一份数据模板,用于表单初始化

})


//关闭弹窗
const emits = defineEmits(['emits'])

function closeDialog() {
    //关闭的时候 不能恢复数据,如果恢复的话,会引起子组件,传递给父组件行数据出错
    emits('close') //事件通知父组件修改el-model的显示状态
}

//获取数据,并初始化
function fetchData() {
    if (props.dataId > 0) {
        //显示编辑数据
        axios_request.get('/web/getById.action?id=' + props.dataId).then(response => {
                if (response.data) {
                    postForm.value = response.data
                }
            }
        )
    } else {
        //显示添加数据
        axios_request.get('/web/create.action').then(response => {
                if (response.data) {

                }
            }
        )
    }

}

//保存数据
function saveData() {

    postFormRef.value.validate(valid => {
        //console.log(valid);
        if (valid) {
            postForm.value.username = ''
            postForm.value.password = ''

            if (props.dataId > 0) {
                //保存编辑数据
                postForm.value.projectinfoid = props.dataId
                axios_request.post('/web/update.action', postForm.value).then(response => {
                    ElMessage({message: response.msg})
                    if (response.msg) {
                        closeDialog()//必须在AJX异步过程内
                    }
                })
            } else {
                //保存添加数据

                axios_request.post('/web/add.action', postForm.value).then(response => {
                    ElMessage({message: response.msg})
                    if (response.msg) {
                        closeDialog()//必须在AJX异步过程内
                    }
                })
            }
        }

    })

}

</script>
